import React, { Component } from 'react';
import { View, Image, Text, Dimensions, TouchableHighlight } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { observer } from 'mobx-react';
import Icon from 'react-native-vector-icons/FontAwesome';
import styles from './styles';
import Button from '../../components/Button';
import Spin from '../../components/spin';
import user from '../../common/models/user';

const pkg = require('../../../package.json')

const logo = require('../../access/logo.png');
const startBg = require('../../access/startBg.png');
const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;
@observer
class Start extends Component {
  state = {
    agree: true,
  }
  render() {
    return (
      <Spin
        visible={this.props.user && this.props.user.pending}
        textContent="正在获取用户信息"
        textStyle={{
          color: '#333',
          fontSize: 16,
          marginTop: -40
        }}
      >
        <View style={styles.startWrap}>
          <View
            style={{
              position: 'absolute',
              zIndex: 0,
            }}
          >
            <Image
              style={{
                height: HEIGHT,
                width: WIDTH
              }}
              source={startBg}
            />
          </View>
          <View style={styles.start}>
            <View style={styles.logo}>
              <Image source={logo} style={{ width: 64, height: 64 }} />
            </View>
            <Text style={styles.title}>答橙计划</Text>
            <Text style={styles.title2}>version {global.appInfo.version}</Text>
          </View>
          <View style={styles.btns}>
            <Button
              icon={<Icon name="mobile" color="#fff" size={26} />}
              onPress={Actions.login}
              type="warning"
              title="手机登录"
              disabled={!this.state.agree}
            />
            {
              this.props.user.wechatIsInstall ? <Button
                icon={<Icon name="weixin" color="#fff" size={20} />}
                onPress={user.wxAuth.bind(user)}
                title="微信登录"
                type="opacity"
                titleColor="#fff"
                disabled={!this.state.agree}
                style={{
                  borderWidth: 1,
                  borderColor: '#ddd'
                }}
              /> : null
            }
            <View style={styles.agree}>
              <TouchableHighlight
                onPress={() => {
                  this.setState({
                    agree: !this.state.agree
                  })
                }}
                style={{ opacity: this.state.agree ? 1 : 0.3 }}
              >
                <Icon
                  name={this.state.agree ? 'check-circle' : 'times-circle'}
                  color="#fff"
                  size={24}
                />
              </TouchableHighlight>
              <View style={styles.protocolText}>
                <Text style={styles.protocol}>同意并遵守</Text>
                <TouchableHighlight onPress={Actions.protocol}>
                  <Text style={styles.protocol}>《答橙计划APP用户注册协议》</Text>
                </TouchableHighlight>
                <Text style={styles.protocol}>和</Text>
                <TouchableHighlight onPress={Actions.privacy}>
                  <Text style={styles.protocol}>《法律条款和隐私政策》</Text>
                </TouchableHighlight>
              </View>
            </View>
          </View>
        </View>
      </Spin>
    );
  }
}
export default Start;
